<template>
  <div>
    <div class="login">
      <!-- 导航栏开始 -->
      <van-nav-bar title="登录" left-text="返回首页" left-arrow @click-left="onClickLeft">
        <template #right>
          <div v-if="mainStores.token" @click="quit">退出</div>
          <div v-else @click="quit"></div>
          <!-- <van-icon name="search" size="18"  @click="fn"/> -->
        </template>
      </van-nav-bar>
      <!-- 导航栏结束 -->
    </div>
    <!-- 登录部分 -->
    <van-form @submit="onSubmit" v-if="!mainStores.token">
      <van-cell-group inset>
        <van-field v-model="username" name="用户名" label="用户名" placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]" autocomplete="off" />
        <van-field v-model="password" type="password" name="密码" label="密码" placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]" autocomplete="off" />
      </van-cell-group>
      <div style="margin: 16px">
        <van-button round block type="primary" native-type="submit">
          提交
        </van-button>
      </div>
    </van-form>

    <!-- 登录部分结束 -->
    <van-button type="primary" size="normal" to="/register" round color="pink" class="button" block
      v-if="!mainStores.token">去注册</van-button>
  </div>
</template>

<script setup>
import { showToast, showFailToast } from "vant";
import { login } from "@/services/index.js";
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
// 引入pinia。做判断
import { useStores } from "@/stores/stores";
const mainStores = useStores();
// 引入pinia做判断
// 2. 生成 router 对象
const router = useRouter();
const onClickLeft = function () {
  history.back();
};
// 登录相关的验证
const username = ref("");
const password = ref("");
// 防止重复点击的写法
const submiting = ref(false);

const onSubmit = async (values) => {
  if (submiting.value) {
    return;
  }
  submiting.value = true;
  // 每次执行的时候，把submiting设为true。
  // let req = await login({
  //   loginname: username.value,
  //   password: password.value,
  // });
  mainStores.hanlogin(username.value, password.value);
  // 写登录功能的实际业务的写法
  // console.log( typeof req,"翁狗狗");
  if (mainStores.code.code == 200) {
    showToast({
      message: "登录成功",
    });
    // 保存token以及其他的一些数据
    window.localStorage.setItem("token", mainStores.code.data.token);
    // 然后保存唯一的id
    window.localStorage.setItem("userid", mainStores.code.data.userid);
    mainStores.changeDataByPatch(localStorage.getItem("token"));
    mainStores.changeuserid(localStorage.getItem("userid"));

    console.log(mainStores.userid);
    // 然后跳转路由
    router.push("/index");

    // 然后在把token里边的数据取出来，放在header里边就好了。
  } else {
    showFailToast(mainStores.code.message);
  }
  // 3. ajax请求完成，把submiting 设为 false
  submiting.value = false;
};
// 退出逻辑bug已经搞定
const quit = function () {
  window.localStorage.removeItem("token");
  window.localStorage.removeItem("userid");
  mainStores.token = "";
  mainStores.userid = "";
  console.log(9999999);
};
</script>
<style scoped>
.login {
  background-color: #e9eae9;
}

.van-nav-bar {
  background-color: #ffffff;
}
</style>
